<template>
  <div class="app-container" id="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px" class="advanced-search-form">
      <!-- 第一行：基本信息 -->
      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="员工" prop="empName">
            <el-select v-model="queryParams.empName" placeholder="请选择员工" @change="handleQuery">
              <el-option
                v-for="emp in empList"
                :key="emp.empName"
                :label="emp.empName"
                :value="emp.empName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="queryParams.idCard" placeholder="请输入" clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="queryParams.mobile" placeholder="请输入" clearable @keyup.enter.native="handleQuery"/>
          </el-form-item>
        </el-col>

        <el-col :span="6" class="form-actions">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            <el-button :icon="isShowMore?'el-icon-arrow-up':'el-icon-arrow-down'" @click="isShowMore=!isShowMore">
              {{isShowMore?'收起':'更多'}}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 更多查询条件（折叠区域） -->
      <el-collapse-transition>
        <div v-show="isShowMore">
          <el-row :gutter="15">
            <!-- 可以在这里添加更多查询条件 -->
            <el-col :span="6">
              <el-form-item label="关联用户" prop="userId">
                <el-select
                  v-model="queryParams.userId"  placeholder="请选择关联用户" @change="handleQuery">
                  <el-option
                    v-for="user in userList"
                    :key="user.userId"
                    :label="user.userName"
                    :value="user.userId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="员工编号" prop="empNo">
                <el-select
                  v-model="queryParams.empNo"  placeholder="请选择员工编号" @change="handleQuery">
                  <el-option
                    v-for="emp in empList"
                    :key="emp.empNo"
                    :label="emp.empNo"
                    :value="emp.empNo"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="queryParams.gender" placeholder="请选择" clearable>
                  <el-option v-for="dict in dict.type.hrm_employee_gender" :key="dict.value" :label="dict.label" :value="dict.value"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="出生日期" prop="birthDate">
                <el-date-picker v-model="queryParams.birthDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="农历生日" prop="lunarBirthday">
                <el-date-picker v-model="queryParams.lunarBirthday" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="生日是否过新历" prop="isSolarBirthday">
                <el-select v-model="queryParams.isSolarBirthday" placeholder="请选择" clearable>
                  <el-option v-for="dict in dict.type.hrm_employee_is_solar_birthday" :key="dict.value" :label="dict.label" :value="dict.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 第二行：日期信息 -->
          <el-row :gutter="15">


            <el-col :span="6">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="queryParams.email" placeholder="请输入" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="籍贯" prop="nativePlace">
                <el-input v-model="queryParams.nativePlace" placeholder="请输入" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item>
            </el-col>

          </el-row>

          <!-- 第三行：联系信息 -->
          <el-row :gutter="15">

            <el-col :span="6">
              <el-form-item label="所属部门" prop="deptId">
                <el-cascader
                  v-model="queryParams.deptId"
                  :options="enabledDeptOptions"
                  placeholder="请选择"
                  style="width:100%"
                  filterable>
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="岗位" prop="postId">
                <el-select v-model="queryParams.postId"  placeholder="请选择岗位" @change="handleQuery">
                  <el-option
                    v-for="post in postList"
                    :key="post.postId"
                    :label="post.postName"
                    :value="post.postId"
                  />
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>

          <!-- 第四行：入职信息 -->
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="员工类型" prop="empType">
                <el-select v-model="queryParams.empType" placeholder="请选择员工类型" filterable clearable>
                  <el-option
                    v-for="dict in dict.type.hrm_employee_emp_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="入职日期" prop="entryDate">
                <el-date-picker v-model="queryParams.entryDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试用期开始" prop="probationStart">
                <el-date-picker v-model="queryParams.probationStart" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试用期结束" prop="probationEnd">
                <el-date-picker v-model="queryParams.probationEnd" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width:100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实习开始时间" prop="internshipStart">
                <el-date-picker filterable clearable
                                v-model="queryParams.internshipStart"
                                type="datetime"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择实习开始时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实习结束时间" prop="internshipEnd">
                <el-date-picker filterable clearable
                                v-model="queryParams.internshipEnd"
                                type="datetime"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择实习结束时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 示例：添加状态查询 -->
              <el-form-item label="员工状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择" clearable>
                  <el-option label="在职" value="0"/>
                  <el-option label="离职" value="1"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-collapse-transition>
    </el-form>
<!--  </div>-->

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['hrm:employee:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['hrm:employee:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['hrm:employee:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['hrm:employee:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="employeeList" @selection-change="handleSelectionChange" stripe :height="tableHeight">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" width="55" label="序号" align="center" fixed/>
<!--      <el-table-column label="员工ID" align="center" prop="empId" />-->
<!--      <el-table-column label="用户ID" align="center" prop="userId" />-->
<!--      <el-table-column label="部门ID" align="center" prop="deptId" />-->
      <el-table-column label="员工编号" align="center" prop="empNo" />
      <el-table-column label="员工姓名" align="center" prop="empName" />
      <el-table-column label="性别" align="center" prop="gender">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.hrm_employee_gender" :value="scope.row.gender"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="身份证号" align="center" prop="idCard" />-->
      <el-table-column label="身份证号" align="center" width="200">
        <template slot-scope="scope">
          {{ maskIdCard(scope.row.idCard) }}
          <el-button
            v-if="scope.row.idCard"
            icon="el-icon-view"
            type="text"
            size="small"
            @click="confirmView(scope.row, 'idCard', '身份证号')"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column label="出生日期" align="center" prop="birthDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.birthDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="农历生日" align="center" prop="lunarBirthday" width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.lunarBirthday, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="生日是否过新历" align="center" prop="isSolarBirthday">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.hrm_employee_is_solar_birthday" :value="scope.row.isSolarBirthday"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="手机号码" align="center" prop="mobile" />-->
      <el-table-column label="手机号码" align="center" width="160">
        <template slot-scope="scope">
          {{ maskMobile(scope.row.mobile) }}
          <el-button
            v-if="scope.row.mobile"
            icon="el-icon-view"
            type="text"
            size="small"
            @click="confirmView(scope.row, 'mobile', '手机号码')"
          ></el-button>
        </template>
      </el-table-column>
<!--      <el-table-column label="邮箱" align="center" prop="email" />-->
      <el-table-column label="邮箱" align="center" width="220">
        <template slot-scope="scope">
          {{ maskEmail(scope.row.email) }}
          <el-button
            v-if="scope.row.email"
            icon="el-icon-view"
            type="text"
            size="small"
            @click="confirmView(scope.row, 'email', '邮箱')"
          ></el-button>
        </template>
      </el-table-column>
<!--      <el-table-column label="所属部门" align="center" prop="deptId" />-->
      <el-table-column label="岗位" align="center" >
        <template slot-scope="scope">
          {{ getPostName(scope.row.postId) }}
        </template>
      </el-table-column>
      <el-table-column label="员工类型" align="center" prop="empType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.hrm_employee_emp_type" :value="scope.row.empType"/>
        </template>
      </el-table-column>
      <el-table-column label="入职日期" align="center" prop="entryDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.entryDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="试用期开始时间" align="center" prop="probationStart" width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.probationStart, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="试用期结束时间" align="center" prop="probationEnd" width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span  style="color:red">{{ parseTime(scope.row.probationEnd, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="实习开始时间" align="center" prop="internshipStart" width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.internshipStart, '{y}-{m}-{d} {h}:{i}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="实习结束时间" align="center" prop="internshipEnd" width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.internshipEnd, '{y}-{m}-{d} {h}:{i}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.hrm_employee_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
<!--      <el-table-column label="籍贯" align="center" prop="nativePlace" />-->
<!--      <el-table-column label="头像图片路径或URL" align="center" prop="avatar" width="100">-->
<!--        <template slot-scope="scope">-->
<!--          <image-preview :src="scope.row.avatar" :width="50" :height="50"/>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-info"
            @click="handleInfo(scope.row)"
            v-hasPermi="['hrm:employee:query']"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['hrm:employee:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['hrm:employee:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改员工基本信息主对话框 - 标签页样式 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-tabs type="border-card">
        <!-- 基本信息标签页 -->
        <el-tab-pane label="基本信息">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="关联用户" prop="userId">
                  <el-select
                    v-model="form.userId"  placeholder="请选择关联用户" >
                    <el-option
                      v-for="user in userList"
                      :key="user.userId"
                      :label="user.userName"
                      :value="user.userId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="员工编号" prop="empNo">
                  <el-input v-model="form.empNo" placeholder="请输入员工编号" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="员工姓名" prop="empName">
                  <el-input v-model="form.empName" placeholder="请输入员工姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="form.gender" placeholder="请选择性别">
                    <el-option
                      v-for="dict in dict.type.hrm_employee_gender"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身份证号" prop="idCard">
                  <el-input v-model="form.idCard" placeholder="请输入身份证号" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出生日期" prop="birthDate">
                  <el-date-picker filterable clearable
                                  v-model="form.birthDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择出生日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="农历生日" prop="lunarBirthday">
                  <el-date-picker filterable clearable
                                  v-model="form.lunarBirthday"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择农历生日">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生日是否过新历" prop="isSolarBirthday">
                  <el-select v-model="form.isSolarBirthday" placeholder="请选择生日是否过新历">
                    <el-option
                      v-for="dict in dict.type.hrm_employee_is_solar_birthday"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号码" prop="mobile">
                  <el-input v-model="form.mobile" placeholder="请输入手机号码" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="form.email" placeholder="请输入邮箱" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="所属部门" prop="deptId">
                  <treeselect v-model="form.deptId" :options="enabledDeptOptions" :show-count="true" placeholder="请选择所属部门" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="岗位" prop="postId">
                  <el-select v-model="form.postId"  placeholder="请选择岗位" >
                    <el-option
                      v-for="post in postList"
                      :key="post.postId"
                      :label="post.postName"
                      :value="post.postId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="员工类型" prop="empType">
                  <el-select v-model="form.empType" placeholder="请选择员工类型">
                    <el-option
                      v-for="dict in dict.type.hrm_employee_emp_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入职日期" prop="entryDate">
                  <el-date-picker filterable clearable
                                  v-model="form.entryDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择入职日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="试用期开始时间" prop="probationStart">
                  <el-date-picker filterable clearable
                                  v-model="form.probationStart"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择试用期开始时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="试用期结束时间" prop="probationEnd">
                  <el-date-picker filterable clearable
                                  v-model="form.probationEnd"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择试用期结束时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实习开始时间" prop="internshipStart">
                  <el-date-picker filterable clearable
                                  v-model="form.internshipStart"
                                  type="datetime"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择实习开始时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实习结束时间" prop="internshipEnd">
                  <el-date-picker filterable clearable
                                  v-model="form.internshipEnd"
                                  type="datetime"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择实习结束时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="状态" prop="status">
                  <el-select v-model="form.status" placeholder="请选择状态">
                    <el-option
                      v-for="dict in dict.type.hrm_employee_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="籍贯" prop="nativePlace">
                  <el-input v-model="form.nativePlace" placeholder="请输入籍贯" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="头像图片路径或URL" prop="avatar">
                  <image-upload v-model="form.avatar"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

        <!-- 教育背景标签页 -->
        <el-tab-pane label="教育背景">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddHrmEmployeeEducation">添加</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteHrmEmployeeEducation">删除</el-button>
            </el-col>
          </el-row>
          <el-table :data="hrmEmployeeEducationList" :row-class-name="rowHrmEmployeeEducationIndex" @selection-change="handleHrmEmployeeEducationSelectionChange" ref="hrmEmployeeEducation" :height="tableHeight" >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="序号" align="center" prop="index" width="50"/>
            <el-table-column label="学校名称" prop="schoolName" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.schoolName" placeholder="请输入学校名称" />
              </template>
            </el-table-column>
            <el-table-column label="学历" prop="education" width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.education" placeholder="请选择学历">
                  <el-option
                    v-for="dict in dict.type.hrm_employee_education_education"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="专业" prop="major" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.major" placeholder="请输入专业" />
              </template>
            </el-table-column>
            <el-table-column label="开始日期" prop="startDate" width="240">
              <template slot-scope="scope">
                <el-date-picker filterable clearable v-model="scope.row.startDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" />
              </template>
            </el-table-column>
            <el-table-column label="结束日期" prop="endDate" width="240">
              <template slot-scope="scope">
                <el-date-picker filterable clearable v-model="scope.row.endDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择结束日期" />
              </template>
            </el-table-column>
            <el-table-column label="学位" prop="degree" width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.degree" placeholder="请选择学位">
                  <el-option
                    v-for="dict in dict.type.hrm_employee_education_degree"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 工作经历标签页 -->
        <el-tab-pane label="工作经历">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddHrmEmployeeExperience">添加</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteHrmEmployeeExperience">删除</el-button>
            </el-col>
          </el-row>
          <el-table :data="hrmEmployeeExperienceList" :row-class-name="rowHrmEmployeeExperienceIndex" @selection-change="handleHrmEmployeeExperienceSelectionChange" ref="hrmEmployeeExperience" :height="tableHeight" >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="序号" align="center" prop="index" width="50"/>
            <el-table-column label="公司名称" prop="companyName" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.companyName" placeholder="请输入公司名称" />
              </template>
            </el-table-column>
            <el-table-column label="职位" prop="position" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.position" placeholder="请输入职位" />
              </template>
            </el-table-column>
            <el-table-column label="开始日期" prop="startDate" width="240">
              <template slot-scope="scope">
                <el-date-picker filterable clearable v-model="scope.row.startDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始日期" />
              </template>
            </el-table-column>
            <el-table-column label="结束日期" prop="endDate" width="240">
              <template slot-scope="scope">
                <el-date-picker filterable clearable v-model="scope.row.endDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择结束日期" />
              </template>
            </el-table-column>
            <el-table-column label="工作描述" width="180">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  :type="scope.row.jobDescription ? 'primary' : 'text'"
                  :icon="scope.row.jobDescription ? 'el-icon-edit' : 'el-icon-plus'"
                  @click="openJobDescriptionDrawer(scope.row)"
                  :class="{'text-button': !scope.row.jobDescription}">
                  {{ scope.row.jobDescription ? '编辑描述' : '添加描述' }}
                </el-button>



                <div v-if="scope.row.jobDescription" class="preview-text" v-html="parseJobDescription(scope.row.jobDescription)">
                </div>


              </template>

            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 证书信息标签页 -->
        <el-tab-pane label="证书信息">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddHrmEmployeeCertificate">添加</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteHrmEmployeeCertificate">删除</el-button>
            </el-col>
          </el-row>
          <el-table :data="hrmEmployeeCertificateList" :row-class-name="rowHrmEmployeeCertificateIndex" @selection-change="handleHrmEmployeeCertificateSelectionChange" ref="hrmEmployeeCertificate" :height="tableHeight" >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="序号" align="center" prop="index" width="50"/>
            <el-table-column label="证书名称" prop="certName" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.certName" placeholder="请输入证书名称" />
              </template>
            </el-table-column>
            <el-table-column label="证书类型" prop="certType" width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.certType" placeholder="请选择证书类型">
                  <el-option
                    v-for="dict in dict.type.hrm_employee_certificate_cert_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="证书编号" prop="certNumber" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.certNumber" placeholder="请输入证书编号" />
              </template>
            </el-table-column>
            <el-table-column label="发证机构" prop="issuingAuthority" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.issuingAuthority" placeholder="请输入发证机构" />
              </template>
            </el-table-column>
            <el-table-column label="颁发日期" prop="issueDate" width="240">
              <template slot-scope="scope">
                <el-date-picker filterable clearable v-model="scope.row.issueDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择颁发日期" />
              </template>
            </el-table-column>
            <el-table-column label="到期日期" prop="expiryDate" width="240">
              <template slot-scope="scope">
                <el-date-picker filterable clearable v-model="scope.row.expiryDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择到期日期" />
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="certStatus" width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.certStatus" placeholder="请选择状态">
                  <el-option
                    v-for="dict in dict.type.hrm_employee_certificate_cert_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="附件路径" prop="attachment" width="150">
              <template slot-scope="scope">
                <file-upload v-model="scope.row.attachment"/>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </el-dialog>

    <!-- 员工基本信息主详情对话框 - 标签页样式 -->
    <el-dialog :title="title" :visible.sync="openInfo" width="80%" append-to-body>
      <el-tabs type="border-card">
        <!-- 基本信息标签页 -->
        <el-tab-pane label="基本信息">
          <el-descriptions border :column="2">
            <el-descriptions-item label="关联用户">{{userName}}</el-descriptions-item>
            <el-descriptions-item label="员工编号">{{form.empNo}}</el-descriptions-item>
            <el-descriptions-item label="员工姓名">{{form.empName}}</el-descriptions-item>
            <el-descriptions-item label="性别">
              <dict-tag :options="dict.type.hrm_employee_gender" :value="form.gender"/>
            </el-descriptions-item>
            <el-descriptions-item label="身份证号">{{form.idCard}}</el-descriptions-item>
            <el-descriptions-item label="出生日期">
              {{ parseTime(form.birthDate, '{y}-{m}-{d}')}}
            </el-descriptions-item>
            <el-descriptions-item label="农历生日">
              {{ parseTime(form.lunarBirthday, '{y}-{m}-{d}')}}
            </el-descriptions-item>
            <el-descriptions-item label="生日是否过新历">
              <dict-tag :options="dict.type.hrm_employee_is_solar_birthday" :value="form.isSolarBirthday"/>
            </el-descriptions-item>
            <el-descriptions-item label="手机号码">{{form.mobile}}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{form.email}}</el-descriptions-item>

            <el-descriptions-item label="所属部门">{{form.deptId}}</el-descriptions-item>
            <el-descriptions-item label="岗位">{{postName}}</el-descriptions-item>
            <el-descriptions-item label="员工类型">
              <dict-tag :options="dict.type.hrm_employee_emp_type" :value="form.empType"/>
            </el-descriptions-item>
            <el-descriptions-item label="入职日期">
              {{ parseTime(form.entryDate, '{y}-{m}-{d}')}}
            </el-descriptions-item>
            <el-descriptions-item label="试用期开始时间">
              {{ parseTime(form.probationStart, '{y}-{m}-{d}')}}
            </el-descriptions-item>
            <el-descriptions-item label="试用期结束时间">
              {{ parseTime(form.probationEnd, '{y}-{m}-{d}')}}
            </el-descriptions-item>
            <el-descriptions-item label="实习开始时间">
              {{ parseTime(form.internStart, '{y}-{m}-{d}')}}
            </el-descriptions-item>
            <el-descriptions-item label="实习结束时间">
              {{ parseTime(form.internEnd, '{y}-{m}-{d}')}}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <dict-tag :options="dict.type.hrm_employee_status" :value="form.status"/>
            </el-descriptions-item>
            <el-descriptions-item label="籍贯">{{form.nativePlace}}</el-descriptions-item>
            <el-descriptions-item label="备注">{{form.remark}}</el-descriptions-item>
            <el-descriptions-item label="头像" :span="2">
              <image-preview :src="form.avatar" :width="50" :height="50"/>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <!-- 教育背景标签页 -->
        <el-tab-pane label="教育背景">
          <el-table
            :data="hrmEmployeeEducationList"
            :row-class-name="rowHrmEmployeeEducationIndex"
            @selection-change="handleHrmEmployeeEducationSelectionChange"
            ref="hrmEmployeeEducation"
            border
            style="width: 100%">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="序号" align="center" prop="index" width="50"/>
            <el-table-column label="学校名称" prop="schoolName" width="150" />
            <el-table-column label="学历" prop="education" width="150">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.hrm_employee_education_education" :value="scope.row.education"/>
              </template>
            </el-table-column>
            <el-table-column label="专业" prop="major" width="150" />
            <el-table-column label="开始日期" prop="startDate" width="120">
              <template slot-scope="scope">
                {{ parseTime(scope.row.startDate, '{y}-{m}-{d}')}}
              </template>
            </el-table-column>
            <el-table-column label="结束日期" prop="endDate" width="120">
              <template slot-scope="scope">
                {{ parseTime(scope.row.endDate, '{y}-{m}-{d}')}}
              </template>
            </el-table-column>
            <el-table-column label="学位" prop="degree" width="150">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.hrm_employee_education_degree" :value="scope.row.degree"/>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 工作经历标签页 -->
        <el-tab-pane label="工作经历">
          <el-table
            :data="hrmEmployeeExperienceList"
            :row-class-name="rowHrmEmployeeExperienceIndex"
            @selection-change="handleHrmEmployeeExperienceSelectionChange"
            ref="hrmEmployeeExperience"
            border
            style="width: 100%">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="序号" align="center" prop="index" width="50"/>
            <el-table-column label="公司名称" prop="companyName" width="150" />
            <el-table-column label="职位" prop="position" width="150" />
            <el-table-column label="开始日期" prop="startDate" width="120">
              <template slot-scope="scope">
                {{ parseTime(scope.row.startDate, '{y}-{m}-{d}')}}
              </template>
            </el-table-column>
            <el-table-column label="结束日期" prop="endDate" width="120">
              <template slot-scope="scope">
                {{ parseTime(scope.row.endDate, '{y}-{m}-{d}')}}
              </template>
            </el-table-column>
            <el-table-column label="工作描述" prop="jobDescription">
              <template slot-scope="scope">
                <div v-if="scope.row.jobDescription" v-html="scope.row.jobDescription"></div>
                <div v-else>无工作描述</div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 证书信息标签页 -->
        <el-tab-pane label="证书信息">
          <el-table
            :data="hrmEmployeeCertificateList"
            :row-class-name="rowHrmEmployeeCertificateIndex"
            @selection-change="handleHrmEmployeeCertificateSelectionChange"
            ref="hrmEmployeeCertificate"
            border
            style="width: 100%">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="序号" align="center" prop="index" width="50"/>
            <el-table-column label="证书名称" prop="certName" width="150" />
            <el-table-column label="证书类型" prop="certType" width="150">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.hrm_employee_certificate_cert_type" :value="scope.row.certType"/>
              </template>
            </el-table-column>
            <el-table-column label="证书编号" prop="certNumber" width="150" />
            <el-table-column label="发证机构" prop="issuingAuthority" width="150" />
            <el-table-column label="颁发日期" prop="issueDate" width="120">
              <template slot-scope="scope">
                {{ parseTime(scope.row.issueDate, '{y}-{m}-{d}')}}
              </template>
            </el-table-column>
            <el-table-column label="到期日期" prop="expiryDate" width="120">
              <template slot-scope="scope">
                {{ parseTime(scope.row.expiryDate, '{y}-{m}-{d}')}}
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="certStatus" width="120">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.hrm_employee_certificate_cert_status" :value="scope.row.certStatus"/>
              </template>
            </el-table-column>
            <el-table-column label="附件">
              <template slot-scope="scope">
                <file-preview :value="scope.row.attachment"/>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>

    <el-drawer
      :title="工作描述"
      :visible.sync="drawer"
      direction="ltr"
      size="50%"
      :before-close="handleBeforeClose"
      @close="closeDrawer">

      <div class="editor-container">
<!--        <editor v-model="form.jobDescription" :min-height="192"/>-->
        <div class="w-e-text"></div>
      </div>

      <div class="drawer-footer">
        <el-button @click="closeDrawer">取消</el-button>
        <el-button type="primary" @click="saveJobDescription">保存</el-button>
      </div>
    </el-drawer>
<!--    <el-drawer-->
<!--      title="我是标题"-->
<!--      :visible.sync="drawer"-->
<!--      :with-header="false">-->
<!--      <div class="editor-container">-->
<!--        <editor v-model="form.jobDescription" :min-height="192"/>-->
<!--      </div>-->
<!--    </el-drawer>-->
  </div>
</template>

<script>
import { listEmployee, getEmployee, delEmployee, addEmployee, updateEmployee, deptTreeSelect } from "@/api/hrm/employee";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import Treeselect from '@riophae/vue-treeselect'
import wangEditor from 'wangeditor'
import {listPost} from "@/api/system/post";
import {listUser} from "@/api/system/user";
import { logPrivacyView } from '@/api/monitor/operlog'

export default {
  mounted() {
    this.initEditor()
  },
  components: {
    Treeselect
  },
  name: "Employee",
  dicts: ['hrm_employee_certificate_cert_status', 'hrm_employee_gender', 'hrm_employee_certificate_cert_type', 'hrm_employee_education_degree', 'hrm_employee_education_education', 'hrm_employee_is_solar_birthday', 'hrm_employee_emp_type', 'hrm_employee_status'],
  data() {
    return {
      from: {
        jobDescription: ''
      },
      // 控制每个抽屉的显示状态
      jobDescriptionDrawerVisible: {},
      editor: null,
      currentContent: '',
      currentRow: null,
      activeRowIndex: null, // 当前正在编辑的行索引
      // 是否显示更多
      isShowMore: false,
      drawer: false,
      // el-table 高度
      tableHeight: 650, // 用于存储 el-table 的高度
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedHrmEmployeeCertificate: [],
      checkedHrmEmployeeExperience: [],
      checkedHrmEmployeeEducation: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 员工基本信息主表格数据
      employeeList: [],
      // 员工教育背景子表格数据
      hrmEmployeeEducationList: [],
      // 员工工作经历子表格数据
      hrmEmployeeExperienceList: [],
      // 员工证书子表格数据
      hrmEmployeeCertificateList: [],
      // 弹出层标题
      title: "",
      // 所有部门树选项
      deptOptions: undefined,
      // 过滤掉已禁用部门树选项
      enabledDeptOptions: undefined,
      // 部门名称
      deptName: undefined,
      // 是否显示弹出层
      open: false,
      // 是否显示详情弹出层
      openInfo: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        empNo: null,
        empName: null,
        gender: null,
        idCard: null,
        birthDate: null,
        lunarBirthday: null,
        isSolarBirthday: null,
        mobile: null,
        email: null,
        postId: null,
        empType: null,
        entryDate: null,
        probationStart: null,
        probationEnd: null,
        internshipStart: null,
        internshipEnd: null,
        status: null,
        nativePlace: null,
        avatar: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        empName: [
          { required: true, message: "员工姓名不能为空", trigger: "blur" }
        ],
        idCard: [
          {
            validator: (rule, value, callback) => {
              // 1. 基本格式校验
              const reg = /^\d{17}[\dXx]$/;
              if (!reg.test(value)) {
                callback(new Error("身份证号格式错误（需18位，最后一位可为X）"));
                return;
              }

              // 2. 省份代码校验（11-65）
              const provinceCode = value.substring(0, 2);
              const validProvinceCodes = [
                "11", "12", "13", "14", "15", "21", "22", "23",
                "31", "32", "33", "34", "35", "36", "37", "41",
                "42", "43", "44", "45", "46", "50", "51", "52",
                "53", "54", "61", "62", "63", "64", "65"
              ];
              if (!validProvinceCodes.includes(provinceCode)) {
                callback(new Error("身份证省份代码无效"));
                return;
              }

              // 3. 出生日期校验
              const birthDate = value.substring(6, 14);
              const year = parseInt(birthDate.substring(0, 4));
              const month = parseInt(birthDate.substring(4, 6)) - 1;
              const day = parseInt(birthDate.substring(6, 8));
              const date = new Date(year, month, day);

              if (
                date.getFullYear() !== year ||
                date.getMonth() !== month ||
                date.getDate() !== day
              ) {
                callback(new Error("身份证出生日期无效"));
                return;
              }

              // 4. 校验码验证（ISO 7064:1983 MOD 11-2）
              const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
              const checkCodes = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
              let sum = 0;

              for (let i = 0; i < 17; i++) {
                sum += parseInt(value.charAt(i)) * weights[i];
              }

              const lastChar = value.charAt(17).toUpperCase();
              if (checkCodes[sum % 11] !== lastChar) {
                callback(new Error("身份证校验码错误"));
                return;
              }

              callback();
            },
            trigger: ["blur", "change"]
          }
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        mobile: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      },
      // 岗位列表
      postList: [],
      // 用户列表
      userList: [],
      // 员工列表
      empList: [],
    };
  },
  watch: {
    hrmEmployeeExperienceList: {
      deep: true,
      handler(newVal) {
        newVal.forEach((item, index) => {
          if (!item.editorInited) {
            this.initEditor(index)
            item.editorInited = true
          }
        })
      }
    },
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList();
    this.getDeptTree();
    this.setTableHeight();
    window.addEventListener('resize', this.setTableHeight);  // 监听窗口大小变化

    // 初始获取岗位列表
    this.getPostList();
    // 初始获取用户列表
    this.getUserList();
    // 初始获取员工列表
    this.getEmpList();
  },
  beforeDestroy() {
    if (this.editor) this.editor.destroy()
    window.removeEventListener('resize', this.setTableHeight); // 移除事件监听
  },

  computed: {
    postName() {
      // 确保 form 和 postList 都已存在
      if (!this.form || !this.form.postId || !this.postList || this.postList.length === 0) {
        return '未知岗位'; // 或者返回空字符串 ''
      }
      // 在 postList 中查找与 form.postId 匹配的岗位
      const post = this.postList.find(item => item.postId === this.form.postId);
      return post ? post.postName : '未知岗位';
    },
    userName() {
      // 确保 form 和 userList 都已存在
      if (!this.form || !this.form.userId || !this.userList || this.userList.length === 0) {
        return '未知用户'; // 或者返回空字符串 ''
      }
      // 在 userList 中查找与 form.userId 匹配的用户
      const user = this.userList.find(item => item.userId === this.form.userId);
      return user ? user.userName : '未知用户'
    }
  },

  methods: {
    // 身份证脱敏
    maskIdCard(idCard) {
      if (!idCard) return '';
      return idCard.length === 18
        ? idCard.replace(/^(.*)$/, '***********')
        : idCard;
    },

    // 手机号脱敏
    maskMobile(mobile) {
      if (!mobile) return '';
      return mobile.replace(/^(.{3})(.*)(.{4})$/, '$1****$3');
    },

    // 邮箱脱敏
    maskEmail(email) {
      if (!email) return '';
      const parts = email.split('@');
      if (parts.length !== 2) return email;
      const [user, domain] = parts;
      if (user.length <= 2) {
        return `${user[0]}*${user.length === 1 ? '' : user[1]}@${domain}`;
      }
      return `${user[0]}${'*'.repeat(user.length - 2)}${user[user.length - 1]}@${domain}`;
    },

    // 点击眼睛图标
    confirmView(row, field, label) {
      this.$confirm(`是否查看该员工的【${label}】？`, '隐私信息查看确认', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 显示完整信息（可弹窗或 Message）
        const fullValue = row[field];
        this.$message.success(`【${label}】：${fullValue}`);

        // 记录日志
        this.recordPrivacyView(row.empId, field, label, fullValue);
      }).catch(() => {
        this.$message.info('已取消查看');
      });
    },

    // 记录隐私查看日志 —— 复用操作日志体系
    recordPrivacyView(empId, field, label) {
      logPrivacyView({
        empId: empId,
        fieldName: field,
        fieldLabel: label
      }).catch(() => {
        // 静默失败，不影响用户体验
      })
    },

    getPostName(postId) {
      // 安全检查：确保 postId 存在且 postList 已加载
      if (!postId || !this.postList || this.postList.length === 0) {
        return '未知岗位';
      }
      // 在 postList 中查找匹配的岗位
      const post = this.postList.find(item => item.postId === postId);
      return post ? post.postName : '未知岗位';
    },
    /** 获取岗位信息 */
    getPostList(){
      listPost(
        {
          pageNum: 1,
          pageSize: 10000,
        }).then(response => {
          this.postList = response.rows;
        console.log("postList",this.postList)
      });
    },
    /** 获取用户信息 */
    getUserList(){
      listUser(
        {
          pageNum: 1,
          pageSize: 10000,
        }).then(response => {
        this.userList = response.rows;
        console.log("userList",this.userList)
      });
    },
    /** 获取员工信息 */
    getEmpList(){
      listEmployee(
        {
          pageNum: 1,
          pageSize: 10000,
        }).then(response => {
        this.empList = response.rows;
        console.log("empList",this.empList)
      });
    },

    handleBeforeClose(done) {
      if (this.editor && this.currentContent !== this.currentRow.jobDescription) {
        this.$confirm('工作描述已修改，是否保存？', '提示', {
          confirmButtonText: '保存',
          cancelButtonText: '放弃',
          type: 'warning'
        }).then(() => {
          this.saveJobDescription();
          done();
        }).catch(() => {
          done();
        });
      } else {
        done();
      }
    },
    openJobDescriptionDrawer(row) {
      this.currentRow = row;
      this.drawer = true;
      this.currentContent = row.jobDescription || '';


      // 初始化编辑器
      this.$nextTick(() => {
        this.initEditor()
      });
    },


    // 初始化编辑器（修改后的版本）
    initEditor() {
      // 确保先销毁旧编辑器
      if (this.editor) {
        this.editor.destroy()
      }

      // 创建新编辑器
      this.editor = new wangEditor('.editor-container .w-e-text')

      // 配置编辑器
      this.editor.config.zIndex = 100;
      this.editor.config.uploadImgShowBase64 = true;
      this.editor.config.onchange = (html) => {
        this.currentContent = html;
      };

      // 创建并设置内容
      this.editor.create();
      this.editor.txt.html(currentContent);
    },

    // 保存描述
    saveJobDescription() {
      if (this.currentRow) {
        this.$set(this.currentRow, 'jobDescription', this.currentContent);
        this.drawer = false;
        this.$message.success('工作描述已保存');
      }

      // 销毁编辑器
      if (this.editor) {
        this.editor.destroy();
        this.editor = null;
      }
    },

    // 关闭抽屉
    closeDrawer() {
      if (this.currentRow) {
        this.$set(this.jobDescriptionDrawerVisible, this.currentRow.id, false);
      }
      if (this.editor) {
        this.editor.destroy();
        this.editor = null;
      }
    },

    handleSuccess(response, file, index) {
      this.hrmEmployeeExperienceList[index].certificateFiles = response.url;
      this.$message.success('上传成功');
    },
    beforeUpload(file) {
      const isValidType = ['application/pdf', 'image/jpeg', 'image/png'].includes(file.type);
      if (!isValidType) {
        this.$message.error('只能上传 PDF/JPG/PNG 文件');
        return false;
      }
      return true;
    },
    handleExceed() {
      this.$message.warning('超出上传数量限制');
    },
    parseJobDescription(html) {
      if (!html || html === '<p></p>') return '无工作描述';
      // 这里可以加入一些防止XSS攻击的安全措施，比如清理HTML内容
      return html;
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data
        this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
      })
    },
    // 过滤禁用的部门
    filterDisabledDept(deptList) {
      return deptList.filter(dept => {
        if (dept.disabled) {
          return false
        }
        if (dept.children && dept.children.length) {
          dept.children = this.filterDisabledDept(dept.children)
        }
        return true
      })
    },
    /** 查询员工基本信息主列表 */
    getList() {
      this.loading = true;
      listEmployee(this.queryParams).then(response => {
        this.employeeList = response.rows;
        this.total = response.total;
        this.loading = false;
        console.log("员工列表数据:", response.rows); // 检查是否包含证书数据
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openInfo = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        empId: null,
        userId: null,
        deptId: null,
        empNo: null,
        empName: null,
        gender: null,
        idCard: null,
        birthDate: null,
        lunarBirthday: null,
        isSolarBirthday: null,
        mobile: null,
        email: null,
        postId: null,
        empType: null,
        entryDate: null,
        probationStart: null,
        probationEnd: null,
        internshipStart: null,
        internshipEnd: null,
        status: null,
        createTime: null,
        updateTime: null,
        remark: null,
        nativePlace: null,
        updateBy: null,
        avatar: null,
        delFlag: null
      };
      this.hrmEmployeeEducationList = [];
      this.hrmEmployeeExperienceList = [];
      this.hrmEmployeeCertificateList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.empId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加员工基本信息主";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const empId = row.empId || this.ids
      getEmployee(empId).then(response => {
        console.log(" response.data", response.data)
        this.form = response.data;
        this.hrmEmployeeEducationList = response.data.hrmEmployeeEducationList;
        this.hrmEmployeeExperienceList = response.data.hrmEmployeeExperienceList;
        this.hrmEmployeeCertificateList = response.data.hrmEmployeeCertificateList || [];

        this.open = true;
        this.title = "修改员工基本信息主";
      });
    },
    /** 详情按钮操作 */
    handleInfo(row) {
      this.reset();
      const empId = row.empId || this.ids
      getEmployee(empId).then(response => {
        this.form = response.data;
        this.hrmEmployeeEducationList = response.data.hrmEmployeeEducationList;
        this.hrmEmployeeExperienceList = response.data.hrmEmployeeExperienceList;
        this.hrmEmployeeCertificateList = response.data.hrmEmployeeCertificateList;
        this.openInfo = true;
        this.title = "员工基本信息主详情";
        console.log("员工列表数据:", response.rows);
      });
    },
    /** 提交按钮 */
    submitForm() {
      console.log('当前证书列表:', this.hrmEmployeeCertificateList);
      console.log('提交的表单数据:', this.form);
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.hrmEmployeeEducationList = this.hrmEmployeeEducationList;
          this.form.hrmEmployeeExperienceList = this.hrmEmployeeExperienceList;
          this.form.hrmEmployeeCertificateList = this.hrmEmployeeCertificateList;

          if (this.form.empId != null) {
            updateEmployee(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addEmployee(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const empIds = row.empId || this.ids;
      this.$modal.confirm('是否确认删除员工基本信息主编号为"' + empIds + '"的数据项？').then(function() {
        return delEmployee(empIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },

    /** 员工教育背景子序号 */
    rowHrmEmployeeEducationIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 员工教育背景子添加按钮操作 */
    handleAddHrmEmployeeEducation() {
      let obj = {};
      obj.schoolName = "";
      obj.education = "";
      obj.major = "";
      obj.startDate = "";
      obj.endDate = "";
      obj.degree = "";
      this.hrmEmployeeEducationList.push(obj);
    },
    /** 员工教育背景子删除按钮操作 */
    handleDeleteHrmEmployeeEducation() {
      if (this.checkedHrmEmployeeEducation.length == 0) {
        this.$modal.msgError("请先选择要删除的员工教育背景子数据");
      } else {
        const hrmEmployeeEducationList = this.hrmEmployeeEducationList;
        const checkedHrmEmployeeEducation = this.checkedHrmEmployeeEducation;
        this.hrmEmployeeEducationList = hrmEmployeeEducationList.filter(function(item) {
          return checkedHrmEmployeeEducation.indexOf(item.index) == -1
        });
      }
    },
    /** 员工工作经历子序号 */
    rowHrmEmployeeExperienceIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 员工工作经历子添加按钮操作 */
    handleAddHrmEmployeeExperience() {
      let obj = {};
      obj.companyName = "";
      obj.position = "";
      obj.startDate = "";
      obj.endDate = "";
      obj.jobDescription = "";
      obj.certificateFiles = "";
      this.hrmEmployeeExperienceList.push(obj);
    },
    /** 员工工作经历子删除按钮操作 */
    handleDeleteHrmEmployeeExperience() {
      if (this.checkedHrmEmployeeExperience.length === 0) {
        this.$modal.msgError("请先选择要删除的员工工作经历子数据");
      } else {
        const hrmEmployeeExperienceList = this.hrmEmployeeExperienceList;
        const checkedHrmEmployeeExperience = this.checkedHrmEmployeeExperience;

        this.hrmEmployeeExperienceList = hrmEmployeeExperienceList.filter(item => {
          return checkedHrmEmployeeExperience.indexOf(item.index) === -1;
        });

        // 可选：删除后清空选中
        this.checkedHrmEmployeeExperience = [];
      }
    },
    /** 员工证书子序号 */
    rowHrmEmployeeCertificateIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 员工证书子添加按钮操作 */
    handleAddHrmEmployeeCertificate() {
      let obj = {};
      obj.certName = "";
      obj.certType = "";
      obj.certNumber = "";
      obj.issuingAuthority = "";
      obj.issueDate = "";
      obj.expiryDate = "";
      obj.certStatus = "";
      obj.attachment = "";
      obj.remarks = "";
      this.hrmEmployeeCertificateList.push(obj);
      this.$nextTick(() => {
        this.$refs.hrmEmployeeCertificate.bodyWrapper.scrollTop = this.$refs.hrmEmployeeCertificate.bodyWrapper.scrollHeight;
      });
    },
    /** 员工证书子删除按钮操作 */
    handleDeleteHrmEmployeeCertificate() {
      if (this.checkedHrmEmployeeCertificate.length == 0) {
        this.$modal.msgError("请先选择要删除的员工证书子数据");
      } else {
        const hrmEmployeeCertificateList = this.hrmEmployeeCertificateList;
        const checkedHrmEmployeeCertificate = this.checkedHrmEmployeeCertificate;
        this.hrmEmployeeCertificateList = hrmEmployeeCertificateList.filter(function(item) {
          return checkedHrmEmployeeCertificate.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleHrmEmployeeCertificateSelectionChange(selection) {
      this.checkedHrmEmployeeCertificate = selection.map(item => item.index)
    },
    /** 复选框选中数据 */
    handleHrmEmployeeExperienceSelectionChange(selection) {
      this.checkedHrmEmployeeExperience = selection.map(item => item.index)
    },
    /** 复选框选中数据 */
    handleHrmEmployeeEducationSelectionChange(selection) {
      this.checkedHrmEmployeeEducation = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('hrm/employee/export', {
        ...this.queryParams
      }, `员工基本信息主数据导出_${new Date().getTime()}.xlsx`)
    },
    // 设置表格高度
    setTableHeight() {
      this.$nextTick(() => {
        const appContainer = document.getElementById('app-container');
        if (appContainer) {
          this.tableHeight = appContainer.clientHeight * 1.7;
        }
      });
    }
  }
};
</script>
<style scoped>
.editor-container {
  position: relative;
  z-index: 2100; /* el-drawer默认z-index是2001 */
}

.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 20px;
  border-top: 1px solid #ebeef5;
  background: #fff;
  text-align: right;
}

.text-button:hover {
  color: #409EFF;
  background: #f5f7fa;
}

.preview-text {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  line-height: 1.5;
  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.advanced-search-form {
  padding: 20px;
  background: #f8f8f8;
  border-radius: 4px;
  margin-bottom: 20px;
}
.el-row {
  margin-bottom: 15px;
}

.el-col {
  padding-right: 15px;
}
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 调整日期选择器宽度 */
.el-date-editor.el-input {
  width: 100%;
}

/* 树选择器样式调整 */
.vue-treeselect {
  line-height: 32px;
}

/* 更多按钮样式 */
.el-button [class*=el-icon-] + span {
  margin-left: 5px;
}

.el-dialog__wrapper {
  transition: none !important;
}

</style>
